<% @title = t("multifactor_authentication") %>

<div class="mfa__container">
  <% if @user.webauthn_enabled?%>
    <%= render "multifactor_auths/webauthn_prompt" %>
  <% end %>

  <% if @user.totp_enabled? || @user.webauthn_only_with_recovery? %>
    <div class="mfa__option">
      <% if @user.totp_enabled? %>
        <h2 class="page__subheading--block"> <%= t(".otp_code") %></h2>
      <% elsif @user.webauthn_only_with_recovery? %>
        <h2 class="page__subheading--block"> <%= t(".recovery_code") %></h2>
      <% end %>
      <div class="t-body">
        <p><%= t(".recovery_code_html") %></p>
      </div>
      <%= form_tag @otp_verification_url, method: :post do %>
        <div class="text_field">
          <% if @user.totp_enabled? %>
            <%= label_tag :otp, t(".otp_or_recovery"), class: 'form__label' %>
            <%= text_field_tag :otp, '', class: 'form__input', autofocus: true, autocomplete: "one-time-code" %>
          <% elsif @user.webauthn_only_with_recovery? %>
            <%= text_field_tag :otp,
              '',
              class: 'form__input',
              autofocus: true,
              autocomplete: :off,
              aria: { label: t(".recovery_code") }
            %>
          <% end %>
        </div>
        <div class="form_bottom">
          <%= submit_tag t("authenticate"), data: { disable_with: t("form_disable_with")}, class: "form__submit" %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
